import React, {Component} from "react";
import {Card, Button, Icon, Table, Select, Input, message} from 'antd';
import LinkButton from "../../components/link-button";
import {reqProducts, reqSearchProducts, reqUpdateStatus} from '../../api/index';
import {PAGE_SIZE} from '../../utils/constant';

const Option = Select.Option;

export default class ProductHome extends Component {
    state = {
        loading: false,
        total: 0,
        products: [],
        searchName: '',
        seachType: 'productName'
    };

    initColumns = () => {
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
            },
            {
                title: '商品描述',
                dataIndex: 'desc',
            },
            {
                title: '价格',
                dataIndex: 'price',
                render: (price) => '￥' + price
            },
            {
                title: '状态',
                width: 100,
                render: (product) => {
                    const {status, _id} = product;
                    return (
                        <span>
                            <Button type='primary' onClick={()=>this.updateStatus(_id, status === 1 ? 2 : 1)}>{status === 1 ? '下架' : '上架'}</Button>
                            <span>{status === 1 ? '在售' : '已下架'}</span>
                        </span>
                    )
                }
            },
            {
                title: '操作',
                width: 100,
                render: (product) => (
                    <span>
                        <LinkButton onClick={()=>this.props.history.push('/product/detail', {product})}>详情</LinkButton>
                        <LinkButton onClick={()=>this.props.history.push('/product/addupdate', product)}>修改</LinkButton>
                    </span>
                )
            },
        ];
    };

    updateStatus = async (productId, status) => {
        const result = await reqUpdateStatus(productId, status);
        if (result.status === 0) {
            message.success('商品更新成功');
            this.getProducts(this.pageNum);
        }
    };

    getProducts = async (pageNum) => {
        this.pageNum = pageNum;
        this.setState({loading: true});

        const {searchName, seachType} = this.state;
        let result;
        if (searchName) {
            result = await reqSearchProducts({pageNum, pageSize: PAGE_SIZE, searchName, seachType});
        } else {
            result = await reqProducts(pageNum, PAGE_SIZE);
        }
        this.setState({loading: false});
        if (result.status === 0) {
            const {total, list} = result.data;
            this.setState({total, products: list});
        }

    };

    componentWillMount() {
        this.initColumns();
    }

    componentDidMount() {
        this.getProducts(1);
    }

    render() {
        const {products,total,loading} = this.state;
        const title = (
            <span>
                <Select value={this.state.seachType} onChange={value => this.setState({seachType: value})} style={{width:150}}>
                    <Option value='productName'>按名称搜索</Option>
                    <Option value='productDesc'>按描述搜索</Option>
                </Select>
                <Input value={this.state.searchName} onChange={(e) => this.setState({searchName: e.target.value})} placeholder='关键字' style={{width:200, margin: '0 15px'}}/>
                <Button type='primary' onClick={()=>this.getProducts(1)}>搜索</Button>
            </span>
        );
        const extra = (
            <Button type='primary' onClick={() => this.props.history.push('/product/addupdate')}>
                <Icon type='plus'/>
                添加商品
            </Button>
        );

        return (
            <Card title={title} extra={extra}>
                <Table
                    loading={loading}
                    rowKey='_id'
                    dataSource={products}
                    columns={this.columns}
                    bordered
                    pagination={{current: this.pageNum, total: total, defaultPageSize: PAGE_SIZE, showQuickJumper: true, onChange: this.getProducts}}
                />
            </Card>
        );
    }
}